<template>
  <view class="account-list">
    <view v-if="accounts.length === 0" class="empty-state">
      <wd-icon name="warn-bold" size="48px" color="#ccc"></wd-icon>
      <text class="empty-text">暂无账号数据</text>
    </view>

    <view v-else>
      <wd-swipe-action v-for="account in accounts" :key="account.id" class="account-item-wrapper" :before-close="beforeClose">
        <view class="account-item" @click="viewAccount(account)">
          <view class="account-icon">
            <category-icon :icon-name="account.category"></category-icon>
          </view>
          <view class="account-info">
            <view class="account-name">{{ account.name }}</view>
            <view class="account-username">{{ account.username }}</view>
          </view>
          <view class="account-actions" @click.stop="">
            <view class="copy-button" @click="copyPassword(account)">
              <wd-icon name="copy" size="20px" color="#999"></wd-icon>
            </view>
          </view>
        </view>

        <template #right>
          <view class="swipe-actions">
            <view class="action-button edit" @click="editAccount(account)">
              <wd-icon name="edit" size="20px"></wd-icon>
            </view>
            <view class="action-button delete" @click="deleteAccount(account)">
              <wd-icon name="delete" size="20px"></wd-icon>
            </view>
          </view>
        </template>
      </wd-swipe-action>
    </view>
  </view>
</template>

<script>
import CategoryIcon from './CategoryIcon.vue'

export default {
  name: 'AccountList',
  components: {
    CategoryIcon
  },
  props: {
    accounts: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    viewAccount(account) {
      this.$emit('view', account)
    },
    editAccount(account) {
      this.$emit('edit', account)
    },
    deleteAccount(account) {
      this.$emit('delete', account)
    },
    copyPassword(account) {
      uni.setClipboardData({
        data: account.password,
        success: () => {
          uni.showToast({
            title: '密码已复制',
            icon: 'success'
          })
        }
      })
    },
    beforeClose({ position, instance }) {
      if (position === 'right') {
        instance.close()
      }
      return true
    }
  }
}
</script>

<script setup>
// Vue 3 setup script
</script>

<style lang="scss" scoped>
.account-list {
  margin-top: 10px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;

  .empty-text {
    margin-top: 10px;
    font-size: 14px;
    color: #999;
  }
}

.account-item-wrapper {
  margin-bottom: 10px;
}

.account-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.account-icon {
  margin-right: 12px;
}

.account-info {
  flex: 1;
  overflow: hidden;

  .account-name {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #333;
  }

  .account-username {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.account-actions {
  padding: 0 5px;
  
  .copy-button {
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s;
    
    &:active {
      background-color: rgba(0, 0, 0, 0.1);
      transform: scale(0.95);
    }
  }
}

.swipe-actions {
  display: flex;
  height: 100%;
}

.action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 100%;
  color: #fff;

  &.edit {
    background-color: #2196f3;
  }

  &.delete {
    background-color: #ff5252;
  }
}
</style>
